import {
  Form,
  InputNumber,
  Space,
  Divider,
  Skeleton,
  FormInstance
} from 'antd';
import {
  useEffect,
  useMemo,
  useState,
  useRef
} from 'react';

import { TOTAL_QUESTION } from '../../../constants/app-constants';
import style from './style.module.less';

interface QuestionGroupTitle {
  title: string,
  spanLen: number,
  lowerTitle: number,
}

interface Props {
  form: FormInstance<any>,
  scoreArr: number[],
  setScoreArr: (param: number[]) => void,
  requestScoreListLoading: boolean
}

const getQuestionGroupTitleNumber = (
  max: number,
  span: number
) => {
  const questionGroupTitle: QuestionGroupTitle[] = [];
  const realSpan = span - 1;

  for (
    let lowerTitle = 1, upperTitle = lowerTitle + realSpan;
    lowerTitle < max;
    lowerTitle += span,
    upperTitle = lowerTitle + realSpan
  ) {
    let spanLen = span;

    if (upperTitle > max) {
      upperTitle = max;
      spanLen = max - lowerTitle + 1;
    }

    questionGroupTitle.push({
      title: `${lowerTitle}~${upperTitle}`,
      spanLen,
      lowerTitle
    });
  }

  return questionGroupTitle;
};

export default ({
  form,
  scoreArr,
  setScoreArr,
  requestScoreListLoading
}: Props) => {
  const inputRefArr = useRef<(HTMLInputElement | null)[]>([]);
  const [
    questionGroupTitle,
    setQuestionGroupTitle
  ] = useState<QuestionGroupTitle[]>([]);

  useEffect(() => {
    setQuestionGroupTitle(
      getQuestionGroupTitleNumber(TOTAL_QUESTION, 5)
    );
  }, []);

  const questions = useMemo(
    () => questionGroupTitle.map((questionGroupTitleItem) => {
      const inputGroupLen = questionGroupTitleItem?.spanLen ?? 0;
      const inputGroup = [];
      const { lowerTitle } = questionGroupTitleItem;

      for (let i = 0; i < inputGroupLen; i += 1) {
        const inputNumber = -1 + lowerTitle + i;

        inputGroup.push(
          <Form.Item
            name={`score${inputNumber}`}
            rules={[
              {
                required: true,
                message: '请输入成绩！',
              },
            ]}
          >
            <InputNumber
              ref={(el) => {
                inputRefArr.current[inputNumber] = el;
              }}
              value={scoreArr[inputNumber]}
              min={1}
              max={5}
              onChange={(value: number) => {
                if (value <= 5 && value >= 1) {
                  scoreArr[inputNumber] = value;
                  setScoreArr([...scoreArr]);

                  if (inputNumber + 1 === TOTAL_QUESTION) {
                    return;
                  }
                  inputRefArr.current[inputNumber + 1]?.focus();
                }
              }}
            />
          </Form.Item>
        );
      }

      return (
        <Space>
          <div className={style['question-group-title']}>
            {questionGroupTitleItem?.title}
          </div>
          {inputGroup}
        </Space>
      );
    }), [questionGroupTitle, scoreArr]
  );

  if (requestScoreListLoading) return <Skeleton active />;
  return (
    <>
      <Divider orientation="left">分数填写</Divider>

      <div className={style['question-box']}>
        <Form
          form={form}
        >
          <Space
            direction="vertical"
          >
            {questions}
          </Space>
        </Form>
      </div>

    </>
  );
};
